<template lang="jade">
    el-row
        el-col(:span="7")
            el-select(v-model="copyProvince", :disabled="disabled", style="margin-right:10px")
                el-option(v-for="option in provinceList", :label="option.name", :value="option.code", :key="option.code")
        el-col(:span="7", v-if="townList.length", style="margin-right:10px")
            el-select(v-model="copyTown", :disabled="disabled")
                el-option(v-for="option in townList", :label="option.name", :value="option.code", :key="option.code")
        el-col(:span="7")
            el-select(v-model="copyCounty", :disabled="disabled", v-if="countyList.length")
                el-option(v-for="option in countyList", :label="option.name", :value="option.code", :key="option.code")
</template>
<script>
import * as DataJS from '@/config/_data'
function handleData (array, current) {
  var obj = { name: '', code: '' }
  array.forEach(item => {
    if (item.code === current) {
      obj.name = item.name
      obj.code = item.code
    }
  })
  return obj
}
export default {
  name: 'addressSelect',
  props: {
    province: {
      default: ''
    },
    city: {
      default: ''
    },
    county: {
      default: ''
    },
    provinceData: {
      required: true,
      default: []
    },
    disabled: {
      default: false
    }
  },
  data () {
    return {
      townList: [],
      countyList: [],
      copyProvince: '',
      copyTown: '',
      copyCounty: ''
    }
  },
  watch: {
    province: function (value) {
      if (value) {
        this.copyProvince = value
      } else {
        this.copyProvince = ''
        this.copyTown = ''
        this.copyCounty = ''
      }
    },
    city: function (value) {
      if (value) {
        this.copyTown = value
      }
    },
    county: function (value) {
      if (value) {
        this.copyCounty = value
      }
    },
    copyProvince: function (value) {
      if (value) {
        DataJS.getAddressSelect(value).then(
          data => {
            this.townList = data.data
            this.countyList = []
            // this.copyTown = ''
            // this.copyCounty = ''
          },
          () => {}
        )
      } else {
        this.townList = []
        this.countyList = []
      }
    },
    copyTown: function (value) {
      if (value) {
        DataJS.getAddressSelect(value).then(
          data => {
            this.countyList = data.data
          },
          () => {}
        )
      }
    },
    copyCounty: function (value) {
      var Province =
        this.provinceList.length &&
        handleData(this.provinceList, this.copyProvince)
      var City =
        this.townList.length && handleData(this.townList, this.copyTown)
      var County =
        this.countyList.length && handleData(this.countyList, this.copyCounty)
      Province &&
        City &&
        County &&
        this.$emit('current', { Province, City, County })
    }
  },
  computed: {
    provinceList: function () {
      return this.provinceData
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
